<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>订单追踪页面</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend style="text-align: center">订单追踪页面</legend>
</fieldset>


<div class="demoTable">

   <!-- <div class="layui-inline">
        <input class="layui-input" name="id" placeholder="请输入查询编码" id="demoReload" autocomplete="off">
    </div>-->
    <!--<button class="layui-btn" data-type="reload" id="sousuo"><i class="layui-icon">&#xe615;</i>搜索</button>-->
    <div class="layui-inline">
        <input class="layui-input" type="date" id="dateselect_start" value="2023-04-01" placeholder="请选择开始日期"
               autocomplete="off">
    </div>
    <div class="layui-inline">
        <input class="layui-input" type="date" id="dateselect_end" value="2023-04-01" placeholder="请选择开始日期"
               autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload" id="xiadanDateSelect"><i class="layui-icon">&#xe615;</i>下单日期搜索</button>
    <button class="layui-btn" data-type="reload" id="test3"><i class="layui-icon">&#xe62f;</i>导入追踪excel</button>
    <button class="layui-btn" data-type="reload" id="dateselect"><i class="layui-icon">&#xe615;</i>生成周业绩</button>
    <!--<button type="button" class="layui-btn" id="test4"><i class="layui-icon">&#xe601;</i>导出追踪excel</button>-->
    <!--<button type="button" class="layui-btn" id="test5"><i class="layui-icon">&#xe601;</i>layui导出选中行的数据</button>-->
</div>

<!-- 你的HTML代码 -->
<table class="layui-hide" id="test" lay-filter="testBar"></table>

<script type="text/html" id="bar">
    <button type="button" class="layui-btn layui-btn-xs" lay-event="update">编辑</button>
    <button type="button" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</button>
</script>
<script src="../layui/layui.js"></script>
<script>
    //一般直接写在一个js文件中
    layui.use(['table', 'layer', 'upload'], function () {
        var table = layui.table
            , $ = layui.$
            , layer = layui.layer
            , upload = layui.upload;


        //刷新页面获取数据的条数
        var count = 100;
        page();

        function page() {
            $.ajax({
                url: '/api/dingdan/getCount',
                dataType: 'json',
                type: 'get',
                async: false,
                success: function (data) {
                    //console.log(data.count)
                    count = data.count;
                }
            });
        }

        // layer.msg('Hello World');
        //进入首页渲染页面
        var ins1 = table.render({
            唯一号码: '唯一号码',
            elem: '#test'
            , url: '/api/dingdan/getList'
            , cols: [[
                {type: 'checkbox'}
                , {field: 'number', title: '序号', sort: true, width: 100, type: 'numbers', unresize: false}
                , {field: '日期', title: '日期'}
                , {field: '订单号', title: '订单号'}
                , {field: '编码', title: '编码'}
                , {field: '大类', title: '大类'}
                , {field: '中类', title: '中类'}
                , {field: '数量', title: '数量'}
                , {field: '单位', title: '单位'}
                , {field: '单价', title: '单价'} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                , {field: '总价', title: '总价'}
                , {field: '预计交期', title: '预计交期'}
                , {field: '交期', title: '交期'}
                // ,{field:'', title: '操作',toolbar:'#bar'}
            ]]
            , page: true
            , limit: 15
            , prev: '上一页'
            , next: '下一页'
            , limits: [10, 20, 30]
            , response: {
                statusName: 'status' //规定数据状态的字段名称，默认：code
                , dataName: 'rows' //规定数据列表的字段名称，默认：data
            }
            , parseData: function (item) { //将原始数据解析成 table 组件所规定的数据
                return {
                    "status": 0,   //解析接口状态
                    "message": "成功",  //解析提示文本
                    "count": count, //解析数据长度
                    "rows": item.data  //解析数据列表
                };
            }
        });

        /*table.on('tool(testBar)',function (obj){
            console.log(obj)
            var layEvent = obj.event;
            alert(layEvent)
        });*/
        //模糊查询搜索按钮的点击事件------------------------------------------------------
        /*$("#sousuo").click(function () {
            var like = $("#demoReload").val();
            //这里以搜索为例
            layer.msg('开始搜索,打印搜索关键词:' + like);
            table.reload('test', {
                url: 'http://localhost:8080/api/dingdan/getLikeList'
                , where: { //设定异步数据接口的额外参数，任意设
                    'like': like//传送搜索条件，取文本框的值
                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            $.ajax({
                url: 'http://localhost:8080/api/dingdan/getLikeCount',
                dataType: 'json',
                type: 'get',
                data: {'like': like},
                async: false,
                success: function (data) {
                    console.log(data.count)
                    count = data.count;
                }
            });
            layer.msg('搜索完成');
        });*/
        //下单日期查询
        $("#xiadanDateSelect").click(function () {
            // var like = $("#demoReload").val();
            var start = $("#dateselect_start").val();
            var end = $("#dateselect_end").val();
            //这里以搜索为例
            //  layer.msg('开始搜索,打印搜索关键词:' + like);
            table.reload('test', {
                url: '/api/dingdan/getxiadanDateSelect'
                , where: { //设定异步数据接口的额外参数，任意设
                    'start': start//传送搜索条件，取文本框的值
                    ,'end': end
                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            $.ajax({
                url: '/api/dingdan/getxiadanCount',
                dataType: 'json',
                type: 'get',
                data: {'start': start,'end': end},
                async: false,
                success: function (data) {
                    console.log(data.count)
                    count = data.count;
                }
            });
            console.log('打印订单追踪模糊查询总条数：'+count);
            layer.msg('搜索完成');
        });


        //新增按开始结束日期的点击事件，生成周业绩数据同步到业绩表中
        $("#dateselect").click(function () {
            var start = $("#dateselect_start").val();
            var end = $("#dateselect_end").val();
            //这里以搜索为例
            //  layer.msg('开始搜索,打印开始日期:'+start+'结束日期:'+end);
            $.ajax({
                url: '/api/dingdan/getDateSelect',
                dataType: 'json',
                type: 'get',
                data: {'start': start, 'end': end},
                async: false,
                success: function (data) {
                    //if (data.equals('更新成功')) {
                    layer.msg('生成成功，请至周业绩界面查询');
                    //  }
                }
            });
        });

        //指定允许上传的文件类型,上传文件
        upload.render({
            elem: '#test3'
            , url: '/api/dingdan/readExcel' //上传接口
            , accept: 'file' //普通文件
            , choose: function (obj) {//选择文件后的回调函数。返回一个object参数，详见下文：https://www.layui.com/doc/modules/upload.html
                showLoad();//启动动画
            }
            , done: function (res) {
                //上传完毕回调
               // console.log('打印上传回调参数:'+res);
               // console.log('打印上传回调参数:'+res.code);
               // console.log('打印上传回调参数:'+res.message);

                if (res.code === '1' ) {
                 //   console.log('进入回调if');
                    closeLoad(showLoad());//成功后关闭动画
                    layer.msg('上传成功');
                    setTimeout('window.location.reload()', 1000);
                } else {
                   // console.log('进入回调else');
                    layer.msg('上传失败！'+res.message, {time: 10000});//延迟10秒后自动关闭
                    console.log('上传失败：'+res.message);
                }

            }

        });
        //动画
        function showLoad() {//显示加载动画，icon: 16,转圈图标
            return layer.msg('文件上传中，请稍等...', { icon: 16, shade: [0.5, '#f5f5f5'], scrollbar: false, offset: 'auto', time: 1000000 });
        }
        //关闭动画
        function closeLoad(index) {
            layer.close(index);
        }
        //Excel后台导出
       /* $("#test4").click(function () {
           // var like = $("#demoReload").val();
            var start = $("#dateselect_start").val();
            var end = $("#dateselect_end").val();
            //layer.msg('打印下载like:' + like);
            console.log('打印下载start:' + start+','+end);
            if (start != null && start != "" && end != null && end != "") {//条件栏不为空，则导出带条件的数据
                window.open('/api/dingdan/exportExcel?fileName=订单追踪表&start=' + start+'&end='+end)
            } else {//条件栏为空，不传递携带参数,则导出全部数据
                window.open('/api/dingdan/exportExcel?fileName=订单追踪表')

            }
            // 文件名称可以根据自己需要进行设置
        })*/

        //Excel通过layui导出
        $("#test5").click(function () {
            // console.log("123")
            var checkStatus = table.checkStatus('test'); //test 即为table绑定的id
            //获取选中行的数据
            var data = checkStatus.data;
            if (data == null || data.length == 0) {
                return layer.msg("请选择你需要导出的数据")
            }

            //将上述表格示例中的指定数据导出为 Excel 文件
            table.exportFile(ins1.config.id, data); //data 为该实例中的任意数量的数据
        })


        var today = new Date();
        var dd = String(today.getDate()).padStart(2, '0');
        var mm = String(today.getMonth() + 1).padStart(2, '0'); // 1月是0!
        var yyyy = today.getFullYear();
        document.getElementById('dateselect_start').value = yyyy + '-' + mm + '-' + dd;
        document.getElementById('dateselect_end').value = yyyy + '-' + mm + '-' + dd;


    });
</script>
</body>
</html>